<template>
  <div class="sell-box">
    <h1 class="sell-h1">
      <router-link to="/"> <i class="iconfont icon-24gl-arrowLeft2"></i></router-link>
      <span>卖东西给多抓鱼</span>
    </h1>
    <ul class="sell-ul">
      <router-link exact-active-class="active" to="/Sell/Sellbook"><li>卖书</li></router-link>
        <router-link active-class="active" to="/Sell/Sellclothes"><li>卖衣服</li></router-link>
        <router-link active-class="active" to="/Sell/Sellelectron"><li>卖电子</li></router-link>
      <!-- <li>卖书</li>
      <li>卖衣服</li>
      <li>卖电子</li> -->
    </ul>
    <div class="sell-content">
        <router-view></router-view>
    </div>
    
  </div>
</template>
<script>
export default {
  name: "Sell",
  data() {
    return {};
  },
};
</script>
<style scoped>
.sell-box {
  background-color: #fff;
  height: 100%;
}
.sell-content {
    height: 5rem;
  margin-top: 1.11rem;
  margin-bottom: 1rem;
}
.sell-box .sell-h1 {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 24px;
  color: #333;
  font-weight: 700;
}
.sell-box .sell-h1 span {
  float: left;
}
.sell-box .sell-h1 .iconfont {
  padding: 0 0.1rem 0 0.1rem;
  float: left;
  font-size: 30px;
}
.sell-box .sell-ul {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0.5rem;
  left: 0;
  height: 0.6rem;
  border-bottom: 0.01rem solid #999;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sell-box .sell-ul li {
  font-size: 22px;
  color: #333;
  height: 0.58rem;
  line-height: 0.58rem;
}
.sell-box .active{
    color: black;
    border-bottom: .02rem solid black;
}

</style>